<template>
    <div>
        <el-dialog
            :visible.sync="is_show"
            title="结算详情"
            center
        >
            <div>
                <el-card
                    v-for="(item, index) in detailData"
                    :key="index"
                >
                    <div class="order-details">
                        <div class="order-item">
                            <span class="title">订单编号</span>：
                            <span class="value">{{item.order_number}}</span>
                        </div>
                        <div class="order-item unfinish">
                            <span class="title">扣款总额</span>：
                            <span class="value">{{item.deduction}}元<br>
                                <!-- <div class="item">
                                    <span class="title">总计</span>：
                                    <span class="value">{{item.deduction}}元</span>
                                </div> -->
                            </span>
                        </div>
                        <div class="order-item unfinish" v-if="item.deduction_details.length > 0">
                            <span class="title">扣款明细</span>：
                            <span class="value" style="margin-left: -70px"><br>
                                <div class="item" v-for="(item, index) in item.deduction_details" :key="index">
                                    <div class="reason">
                                        {{index + 1}}、扣款理由：{{item.name}}
                                    </div>
                                    <div class="price">-{{item.deduction_price}}元</div>
                                </div>
                            </span>
                        </div>
                        <div class="order-item finish">
                            <span class="title">奖励总额</span>：
                            <span class="value">{{item.reward}}元<br>
                            </span>
                        </div>
                        <div class="order-item finish" v-if="item.reward_details.length > 0">
                            <span class="title">奖励详情</span>：
                            <span class="value" style="margin-left: -70px"><br>
                                <div class="item" v-for="(item, index) in item.reward_details" :key="index">
                                    <div class="reason">
                                       {{index + 1}}、奖励理由：{{item.reason}}
                                    </div>
                                    <div class="price">+{{item.reward}}元</div>
                                </div>
                            </span>
                        </div>
                        <div class="order-item">
                            <span class="title">未结算金额</span>：
                            <span class="value">{{item.unsettled}}元</span>
                        </div>
                        <div class="order-item">
                            <span class="title">已结算金额</span>：
                            <span class="value">{{item.settled}}元</span>
                        </div>
                        <div class="order-item">
                            <span class="title">总结算金额</span>：
                            <span class="value">{{item.total}}元</span>
                        </div>
                    </div>
                    <div class="operate">
                        <el-button type="primary" size="middle" class="mb10" @click="operate('reward', item)">奖励</el-button><br>
                        <el-button type="danger" size="middle" @click="operate('publish', item)">惩戒</el-button>
                    </div>
                </el-card>
            </div>
        </el-dialog>
        <auditor ref="auditor" @refresh="refresh"></auditor>
    </div>
</template>

<script>
import auditor from './auditor'
export default {
    components: {
        auditor
    },
    data() {
        return {
            is_show: false,
            agent_id: null,
            detailData: []
        }
    },

    methods: {
        operate(type, data) {
            let obj = {
                agent_id: this.agent_id,
                finals_id: data.final_id,
                type: type,
                order_id: data.order_id,
                settlement_id: data.settlement_id
            }
            this.$refs['auditor'].showOn(obj)
        },
        async showOn(id) {
            this.agent_id = id
            await this.getInfo()
        },
        refresh() {
            this.$emit('refresh')
            this.getInfo()
        },
        getInfo() {
            this.$axios.get('/api/settlement/settlement_statistics_details', {
                params: {
                    agent_id: this.agent_id
                }
            }).then(res => {
                if (res.data.code == 200) {
                    if (res.data.data.length == 0) {
                        this.$message({
                            type: 'error',
                            message: '暂无结算明细'
                        })
                        return
                    }
                    this.detailData = res.data.data
                    this.is_show = true
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
    .el-card {
        margin-bottom: 20px;
        &:nth-last-child(1) {
            margin-bottom: 0;
        }
    }
    .el-card__body {
        display: flex;
        align-items: center;
        .order-details {
            flex: 1;
            .order-item {
                display: flex;
                .title {
                    flex:0 0 100px;
                    text-align: justify;
                    text-align-last: justify;
                }
                .value {
                    flex: 1;
                    .item {
                        display: flex;
                        .reason {
                           flex: 1;
                        }
                        .price {
                            flex: 0 0 100px;
                            text-align: right;
                        }
                    }
                }
            }
        }
        .operate {
            flex: 0 0 100px;
            text-align: center;
        }
    }
}
</style>
